<template>
	<div>
		<!-- 头部 -->
		<div class="header">
			<el-row style="padding: 5px 0 0 0;">
				<el-col :span="4">
					投手名称:
					<el-input v-model="aName" placeholder="请输入内容" style="width: 200px;"></el-input>
				</el-col>
				<el-col :span="4">
					工号:
					<el-input v-model="aId" placeholder="请输入内容" style="width: 200px;"></el-input>
				</el-col>
				<el-col :span="2">
					<el-button size="mini" @click="selectLike"
						style="width: 90px;height: 40px;background-color: #00A0FF;color: #fff;">
						查询结果</el-button>
				</el-col>
				<el-col :span="2">
					<el-button type="primary" @click="dialogVisiblese=true" icon="el-icon-circle-plus-outline"
						:loading="isno" plain>添加投手</el-button>
				</el-col>
				<el-col :span="2">
					<el-button type="primary" @click="dialogVisible = true" icon="el-icon-s-operation" :loading="isno"
						plain>调整权重</el-button>
				</el-col>
			</el-row>
		</div>
		<el-table :header-cell-style="{'text-align':'center'}" :cell-style="{ textAlign: 'center' }"
			:data="advertisersList" stripe style="width: 100% width: 80%;margin: auto">
			<el-table-column property="id" label="编号">
			</el-table-column>
			<el-table-column property="number" label="投手工号">
			</el-table-column>
			<el-table-column property="name" label="姓名">
			</el-table-column>
			<el-table-column property="weight" label="权重">

			</el-table-column>
			<el-table-column label="操作">
				<el-row slot-scope="scope">
					<el-col span="6"><el-button type="text" size="mini"
							@click=" dialogVisibles = true,value=scope.row.id">添加纵横</el-button></el-col>
					<el-col span="18"><el-button type="text" size="mini"
							@click="deletes(scope.row.id)">删除</el-button></el-col>
				</el-row>
			</el-table-column>
		</el-table>
		<el-dialog title="调整权重" :visible.sync="dialogVisible" width="20%" :before-close="handleClose">
			<el-row>
				<el-col :span="12">名称</el-col>
				<el-col :span="12">权重(总和100%)</el-col>
			</el-row>
			<el-row v-for="(item,index) in advertisersList" :key="item.id" style="margin: 10px;">
				<el-col :span="12" style="margin: 10px 0 0 0;">{{item.name}}</el-col>
				<el-col :span="12">
					<el-input v-model="item.weight" @input="validateInput(index, $event)" type="number"
						placeholder="请输入权重"></el-input>
				</el-col>
			</el-row>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="handleDialogClose">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog title="添加纵横" :visible.sync="dialogVisibles" width="12%" :before-close="handleClose">
			<el-select v-model="value" placeholder="请选择">
				<el-option v-for="item in advertisersList" :key="item.id" :label="item.name" :value="item.id">
				</el-option>
			</el-select>
			<el-table ref="multipleTable" :data="resourceCategory" tooltip-effect="dark" style="width: 100%"
				@selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55">
				</el-table-column>
				<el-table-column prop="advertiserName" label="纵横名称" width="120">
				</el-table-column>
			</el-table>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisibles = false">取 消</el-button>
				<el-button type="primary" @click="dialogVisibles = false">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog title="添加投手" :visible.sync="dialogVisiblese" width="20%" :before-close="handleClose">
			<div style="margin: 10px 0 0 0;">
				工号:
				<el-input v-model="aId" placeholder="请输入内容" style="width: 200px;"></el-input>
			</div>
			<div style="margin: 10px 0 0 0;">
				姓名:
				<el-input v-model="name" placeholder="请输入内容" style="width: 200px;"></el-input>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisibles = false">取 消</el-button>
				<el-button type="primary" @click="dialogVisibles = false">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import '@/assets/css/index.css'
	import qs from 'qs'
	export default {
		name: "qusd",
		data() {
			return {
				dialogVisiblese: false,
				value: '',
				isno: false,
				value1: '',
				advertisersList: [],
				resourceCategory: [],
				aName: '',
				aId: '',
				role: '',
				categoryIds: '',
				dialogVisible: false,
				dialogVisibles: false,
				description: '',
				title: '',
				resource: [],
				videoUrl: '',
				roleDescriptions: {

				}
			}
		},
		created() {
			let than = this
			this.$axios.post('umsPitcher/list', qs.stringify({})).then((res) => {
				than.advertisersList = res.data;

				console.log(than.advertisersList)
			})
			this.$axios.get('advertisers/getlist').then((res) => {
				than.resourceCategory = res.data;
				console.log(than.resourceCategory)
			})
		},
		methods: {
			handleSelectionChange(val) {
				alert(val);
			},
			validateInput(index, event) {
				// 获取输入值并尝试转换为整数  
				let inputValue = parseInt(event.target.value, 10);

				// 检查输入值是否为NaN或者小于0  
				if (isNaN(inputValue) || inputValue < 0) {
					// 重置为0并给出提示  
					this.advertisersList[index].weight = 0;
					alert('请输入有效的非负整数！');
					event.target.value = '0'; // 重置输入框的值为0  
					return;
				}

				// 计算除了当前项以外的权重总和  
				let sum = this.advertisersList.reduce((acc, item, idx) => {
					if (idx !== index) {
						return Number(acc) + Number(item.weight);
					}
					return acc;
				}, 0);
				alert(sum)

				// 加上当前项的输入值（注意这里先不更新列表中的值）  
				sum += inputValue;

				// 检查总和是否超过100  
				if (sum != 100) {
					// 给出提示，但不重置输入框的值（允许用户继续编辑）  
					alert('权重总和必须100%！');
				} else {
					// 如果总和有效，则更新数据模型中的值（但这里不执行，因为用户可能还在编辑）  
					// this.advertisersList[index].weight = inputValue;  
				}
			},
			handleDialogClose() {
				// 计算当前权重总和  
				let sum = this.advertisersList.reduce((acc, item) => {
					// 使用Number()函数或一元加号来尝试将item.weight转换为数字  
					const weight = Number(item.weight) || 0; // 如果转换失败，则默认为0  
					return acc + weight;
				}, 0);
				alert(sum)
				// 检查总和是否超过100  
				if (sum != 100) {
					// 如果超过，给出提示并不关闭对话框  
					alert('权重总和必须是100%！请重新调整。');
				} else {
					console.log(this.advertisersList)
					this.$axios.post('umsPitcher/update', this.advertisersList, {
						headers: {
							'Content-Type': 'application/json'
						}
					}).then((res) => {
						console.log(res);
					});
					this.dialogVisible = false;
				}
			},

		}
	}
</script>

<style>
	.header {
		width: auto;
		height: 50px;
		border: 1px solid #ddd;
		margin: 15px auto;
		border-radius: 3px 3px;
		position: relative;
	}

	video {
		box-shadow: none;
		outline: none;
	}
</style>